﻿<template>
  <div class="">
    <van-nav-bar @click-left="$router.back()" left-arrow title="任务中心" fixed>
    </van-nav-bar>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in swiperArr" :key="index">
        <a :href="item.linkUrl">
          <img :src="$publicObj.urlImg(item.url)" alt="" />
        </a>
      </van-swipe-item>
    </van-swipe>
    <h3>
      <img src="../../assets/images/detail/head.png" alt="" />
      发布统计
    </h3>
    <div class="info">
      <div class="item">
        <h4>可推广任务</h4>
        <p>
          {{ tasks.promotion || 0 }}
          <span>篇</span>
        </p>
      </div>
      <div class="item">
        <h4>剩余赏金</h4>
        <p>{{ tasks.bountyDay || 0 }} <span>元</span></p>
      </div>
      <div class="item">
        <h4>已发出赏金</h4>
        <p>{{ tasks.totalPrices || 0 }}<span>元</span></p>
      </div>
    </div>
    <main>
      <div class="poster_type">
        <ul>
          <li :class="{ active: type == 1 }" @click="setType(1)">
            文章
            <i></i>
          </li>
          <li :class="{ active: type == 3 }" @click="setType(3)">
            海报
            <i></i>
          </li>
          <li :class="{ active: type == 4 }" @click="setType(4)">
            视频
            <i></i>
          </li>
          <li :class="{ active: type == 5 }" @click="setType(5)">
            活动
            <i></i>
          </li>
          <li :class="{ active: type == 6 }" @click="setType(6)">
            招聘
            <i></i>
          </li>
        </ul>
      </div>
      <van-search v-model="searchKey" shape="round" placeholder="请输入标题" />
      <div class="sort">
        <div class="item" @click="pressSort(1)">
          按单价排序
          <img
            v-if="sortType == 1 && sort == 1"
            src="../../assets/images/task/search_max.png"
            alt=""
            class="imgs"
          />
          <img
            v-else-if="sortType == 1 && sort == 0"
            src="../../assets/images/task/search_min.png"
            alt=""
            class="imgs"
          />
          <img
            v-else
            src="../../assets/images/task/search_no.png"
            alt=""
            class="imgs"
          />
        </div>
        <div class="item" @click="pressSort(0)">
          按发布时间排序
          <img
            v-if="sortType == 0 && sort == 1"
            src="../../assets/images/task/search_max.png"
            alt=""
            class="imgs"
          />
          <img
            v-else-if="sortType == 0 && sort == 0"
            src="../../assets/images/task/search_min.png"
            alt=""
            class="imgs"
          />
          <img
            v-else
            src="../../assets/images/task/search_no.png"
            alt=""
            class="imgs"
          />
        </div>
        <div class="item" @click="pressSort(2)">
          按剩余次数排序
          <img
            v-if="sortType == 2 && sort == 1"
            src="../../assets/images/task/search_max.png"
            alt=""
            class="imgs"
          />
          <img
            v-else-if="sortType == 2 && sort == 0"
            src="../../assets/images/task/search_min.png"
            alt=""
            class="imgs"
          />
          <img
            v-else
            src="../../assets/images/task/search_no.png"
            alt=""
            class="imgs"
          />
        </div>
      </div>
      <div class="container" v-if="taskArr.length !== 0">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false"
        >
          <div
            class="items"
            @click="clickDetail(item.id)"
            v-for="(item, index) in taskArr"
            :key="index"
          >
            <div class="left">
              <img :src="$publicObj.urlImg(item.cover)" />
              <img
                src="../../assets/images/task/getMoney.png"
                alt=""
                class="money"
                v-show="item.type == 9 || item.type == 10"
              />
            </div>
            <div class="right">
              <span class="title">{{ item.title }}</span>
              <span class="p">{{ item.description }}</span>
              <div class="bottom">
                <span>奖金额：{{ item.spreadPrice || 0 }}元/次</span>
                <span>剩余次数：{{ item.residueNum || 0 }}次</span>
              </div>
            </div>
          </div>
        </van-list>
      </div>
      <van-empty description="暂无数据" v-else />
    </main>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      searchKey: "", //搜索关键字
      type: 1, //任务类型
      sortType: 1, //排序
      sort: 0, //从小到大

      taskArr: [], //任务列表
      agentId: "", //所属id
      wxUserInfo: {}, //微信用户个人信息
      detail: "/detail", //需要跳转的详情页
      tasks: {}, //转发任务数量
      swiperArr: [], //轮播图
      loading: false, //加载状态
      finished: false, //完成
      page: 1, //页数
      limit: 8, //条数
      totalPage: "", //总页数
    };
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.wxUserInfo = JSON.parse(sessionStorage.getItem("userWxData"));
    this.agentId = sessionStorage.getItem("agentId");
    this.getTaskStatistics();
    this.getTaskArr();

    this.$store.dispatch("updateUserInfo");
    //获取轮播图数据
    this.getswiperArr();
  },
  methods: {
    //触底下一页
    onLoad() {
      if (this.page >= this.totalPage) {
        this.finished = true;
        return;
      }
      this.page++;

      this.setType(this.type);
      // 加载状态结束
      this.loading = false;
    },
    // 按剩余次数 按发布时间 按单价 排序
    pressSort(n) {
      if (this.sortType == n) {
        if (this.sort == 0) {
          this.sort = 1;
        } else {
          this.sort = 0;
        }
      } else {
        this.sortType = n;
      }

      // 发请求
      if (this.type == 1) {
        this.detail = "/detail";
        this.getTaskArr();
      } else if (this.type == 3) {
        this.detail = "/postDetail";
        this.getPosterList();
      } else if (this.type == 4) {
        this.detail = "/videoDetail";
        this.getVideoList();
      } else if (this.type == 6) {
        this.detail = "/inviteDetail";
      }
    },

    //获取轮播图数据
    getswiperArr() {
      this.swiperArr = this.$store.state.userInfo.systemCoverList.map(
        (item) => {
          return { url: item.url, linkUrl: item.linkUrl };
        }
      );
    },
    //点击跳转详情分享
    async clickDetail(id) {
      let str = "";

      if (this.type == 1) {
        str = "文章";
      } else if (this.type == 3) {
        str = "海报";
      } else if (this.type == 4) {
        str = "视频";
      } else if (this.type == 6) {
        str = "招聘";
      }

      return this.$router.push(`${this.detail}?id=${id}&from=task`);
    },
    //获取banner数据
    async getTaskStatistics() {
      let res = await this.$api.getTaskStatistics({
        account: this.$store.state.userInfo.account,
      });
      if (res.code !== 0) return;
      this.tasks = res.data;
    },
    // 切换
    setType(n) {
      // this.taskArr = [];
      if (this.type != n) {
        this.taskArr = [];
        this.page = 1;
        this.totalPage = "";
      }
      if (n == 1) {
        this.detail = "/detail";
        this.getTaskArr();
      } else if (n == 3) {
        this.detail = "/postDetail";
        this.getPosterList();
      } else if (n == 4) {
        this.detail = "/videoDetail";
        this.getVideoList();
      } else if (n == 6) {
        this.detail = "/inviteDetail";
        this.getRecruit();
      }
      this.type = n;
    },
    //获取视频列表
    async getVideoList() {
      let res = await this.$api.getPromotionTask({
        title: this.searchKey,
        page: this.page,
        limit: this.limit,
        tableType: 4,
        sortType: this.sortType, //排序
        sort: this.sort,
        account: 1,
        userId: this.$store.state.userInfo.id,
      });
      if (res.code != 0) return;
      //判断是否是第一页
      if (this.page == 1) {
        this.taskArr = res.data.records || [];
      } else {
        this.taskArr.push(...res.data.records);
      }
      this.totalPage = res.data.pages;
    },
    //获取招聘列表
    async getRecruit() {
      let res = await this.$api.getPromotionTask({
        title: this.searchKey,
        page: this.page,
        limit: this.limit,
        tableType: 15,
        sortType: this.sortType, //排序
        sort: this.sort,
        account: 1,
        userId: this.$store.state.userInfo.id,
      });
      if (res.code != 0) return;
      //判断是否是第一页
      if (this.page == 1) {
        this.taskArr = res.data.records || [];
      } else {
        this.taskArr.push(...res.data.records);
      }
      this.totalPage = res.data.pages;
    },
    //获取海报任务列表
    async getPosterList() {
      let res = await this.$api.getPromotionTask({
        title: this.searchKey,
        page: this.page,
        limit: this.limit,
        tableType: 3,
        sortType: this.sortType, //排序
        sort: this.sort,
        account: 1,
        userId: this.$store.state.userInfo.id,
      });
      if (res.code != 0) return;
      //判断是否是第一页
      if (this.page == 1) {
        this.taskArr = res.data.records || [];
      } else {
        this.taskArr.push(...res.data.records);
      }
      this.totalPage = res.data.pages;
    },
    //获取文章任务列表
    async getTaskArr() {
      let obj = {
        title: this.searchKey,
        page: this.page,
        limit: this.limit,
        tableType: 1,
        sortType: this.sortType, //排序
        sort: this.sort,
        account: 1,
        userId: this.$store.state.userInfo.id,
      };
      let res = await this.$api.getPromotionTask(obj);
      if (res.code !== 0) return;
      //判断是否是第一页
      if (this.page == 1) {
        this.taskArr = res.data.records || [];
      } else {
        this.taskArr.push(...res.data.records);
      }
      this.totalPage = res.data.pages;
    },
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    document.querySelector("html").style.backgroundColor = "#fff";
    document.querySelector("body").style.backgroundColor = "#fff";
  },
};
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
/deep/.van-nav-bar .van-icon {
  color: #666666;
}
.my-swipe {
  margin-top: 46px;
  height: 150px;
  .van-swipe-item {
    img {
      width: 100%;
      height: 100%;
    }
  }
}
h3 {
  padding: 0 15px;
  font-size: 16px;
  font-weight: 700;
  color: #333333;
  letter-spacing: 1px;
  margin: 20px 0 10px;
  img {
    width: 4px;
    height: 15px;
    margin-right: 5px;
  }
}
.info {
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  .item {
    width: 110px;
    height: 63px;
    border-radius: 5px;
    color: #fff;
    border-radius: 10px;
    background: url("../../assets/images/detail/bg1.png") no-repeat;
    background-size: 100%;
    &:nth-of-type(2) {
      background: url("../../assets/images/detail/bg2.png") no-repeat;
      background-size: 100%;
    }
    &:nth-of-type(3) {
      background: url("../../assets/images/detail/bg3.png") no-repeat;
      background-size: 100%;
    }

    h4 {
      font-size: 11px;
      padding: 8px 0;
      text-align: center;
    }
    p {
      font-size: 19px;
      font-weight: 700;
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        font-size: 10px;
        font-weight: normal;
      }
    }
  }
}
main {
  padding: 0 15px;
  padding-bottom: 52px;
  h3 {
    font-size: 14px;
    margin-bottom: 5px;
    font-weight: 700;
    color: #333333;
  }
  // .van-search {
  //   background-color: #f3f5f7;
  // }
  .sort {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    .item {
      font-size: 11px;
      text-align: left;
      color: #666666;
      i {
        font-size: 11px;
        color: #ccc;
      }
    }
  }

  .items {
    display: flex;
    margin-top: 12px;
    .left {
      flex: 1;
      width: 90px;
      height: 90px;
      margin-right: 15px;
      position: relative;
      img {
        width: 90px;
        height: 90px;
        border-radius: 5px;
      }
      .money {
        width: 35px;
        height: 35px;
        position: absolute;
        right: 0;
        top: 0;
        border-radius: none;
      }
    }
    .right {
      flex: 3;
      span {
        font-size: 11px;
        color: #999999;
      }
      .title {
        display: block;
        font-size: 14px;
        color: #333333;
      }
      .p {
        margin-top: 3px;
        height: 30px;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
      }
      .bottom {
        width: 246px;
        margin-top: 8px;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
.poster_type {
  padding: 0 15px;
  background-color: #fff;
  ul {
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    li {
      font-size: 16px;
      color: #666;
      display: -webkit-flex;
      display: flex;
      justify-content: center;
      position: relative;
      align-items: center;
      padding: 5px 0;
      i {
        width: 28px;
        height: 3px;

        border-radius: 3px;
        position: absolute;
        bottom: 0;
      }
    }
    .active {
      font-weight: 700;
      color: #000;
      i {
        background-color: #0264d1;
      }
    }
  }
}
.imgs {
  width: 8px;
  height: 100%;
}
</style>
